<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String baseBath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
</head>
</head>
<body>
<base href="<%=baseBath%>">
<div id="main" style="width: 600px;height:500px; float: left"></div>
<div id="main1" style="width: 600px;height:500px; float: left"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        function Data(name,data) {
            this.name= name
            this.type= 'bar'
            this.stack= 'total'
            // this.label= {
            //  show: true
            // }
            this.emphasis= {
                focus: 'series'
            }
            this.data= data
        }


        var myChart = echarts.init(document.getElementById('main'));
        $.post("tongji/findDriveCount").done(function (data) {
            var user = new Array();
            var series = new Array();
            var dataList = new Array();
            for (let i = 0; i < data.userList.length; i++) {
                user.push(data.userList[i].name)
            }
            for (let i = 0; i < data.driveList.length; i++) {
                series.push(data.driveList[i].name)
                dataList.push(new Data(data.driveList[i].name,data.driveList[i].counts))
            }
            myChart.setOption({
                title: {
                    text: '本月试驾量'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    name: "车系",
                    data: series
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {

                    type: 'value'
                },
                yAxis: {
                    name: "试驾陪同员工姓名",
                    nameLocation:"center",
                    nameRotate:"90",
                    nameGap:"60",
                    nameTextStyle: {
                     fontSize: 20,
                    },
                    type: 'category',
                    data:user
                },
                series:dataList,
                color: ['#00FF7F','#40E0D0'],
                // backgroundColor:'#100C2A',
                // textStyle:{
                //     color:"#000000",
                //     fontFamily:"Microsoft YaHei",
                //     fontSize:12,
                //     fontStyle:"normal"
                // }

            })
        })

        var myChart1 = echarts.init(document.getElementById('main1'),'');
        $.post("tongji/findBuyCarCount").done(function (data) {
            var name=new Array();
            var count=new Array();
            $.map(data,function (obj) {
               name.push(obj.name);
               count.push(obj.count);
            })
            myChart1.setOption({
                title: {
                    text: '本月员工采买线索转化情况'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: "跟进人",
                        nameLocation:"bottom",
                        nameTextStyle: {
                            fontSize: 18,
                            padding:[0,0,-60,0]
                        },
                        type: 'category',
                        data: name,
                        axisTick: {
                            alignWithLabel: true
                        },

                    }
                ],
                yAxis: [
                    {
                        max : 10,
                        min : 0,
                        splitNumber :5,
                        name: "记录计数(个)",
                        nameLocation:"center",
                        nameRotate:"90",
                        nameGap:"20",
                        nameTextStyle: {
                            fontSize: 20,
                        },
                        type: 'value'
                    },

                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: '60%',
                        data: count
                    }
                ]
            })
        })

    })
</script>
</body>
</html>

